<template>
  <div class="my-points">
    <div class="center-header">
      <div
        v-for="(item, index) in componentsName"
        :key="index"
        @click="handleChangeTab(item, index)"
        :class="['default', index == current ? 'active' : '']"
      >
        {{ item }}
      </div>
    </div>
    <!-- 积分总数 -->
    <div v-if="current === 0">
      <div class="points-number">
        <div class="avatar">
          <img v-if="userStore.personalDetailInfo?.avatar" :src="userStore.personalDetailInfo?.avatar" alt="">
        </div>
        <p>您当前积分：{{ userStore.personalDetailInfo?.point_num }}</p>
      </div>
      <div class="points-info-desc">
      
        <div class="desc-title">
          积分获取说明：
        </div>
        <div class="desc-content">
          1、注册奖励：新用户注册即送100云豆；<br />
          2、发布个人帖子：10云豆/天；<br />
          3、订阅购买云帆美研产品服务，按照消费金额*10%返云豆；<br />
          4、每日登录 10云豆/天
        </div>
      </div>
    </div>
    <div class="table-container" v-if="current === 1">
      <el-table :data="tableData" :header-cell-style="{ backgroundColor: '#E7F0F3', color: '#333' }" style="width: 100%">
        <el-table-column prop="description" label="积分说明">
          <template #default="scope">
            <div class="table-header">
              {{ scope.row.description }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="change_total" label="积分">
          <template #default="scope">
            <div class="table-header">
              {{ scope.row.type === 1 ? '+' : '-' + scope.row.change_total }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="时间">
          <template #default="scope">
            <div class="table-header">
              {{ formatTime(scope.row.create_time) }}
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="operation" label="操作">
          <template #default="scope">
            <div
              :class="{
                toGet: scope.row.operation === '去获取',
                toUse: scope.row.operation === '立即签到',
                disabled: scope.row.operation === '禁用',
              }"
            >
              {{ scope.row.operation }}
            </div>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="pagination" v-if="current === 1">
      <Pagination 
        :total="total" 
        :current-page="currentPage" 
        :page-size="pageSize" 
        @current-change="handlePageChange" 
        @size-change="handleSizeChange" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useUserStore } from "@/stores/User";
import dayjs from 'dayjs';
import { myIntegralCenter } from "@/service/personalCenter";
const userStore = useUserStore();
const componentsName = ["我的积分", "积分详情"];
const current = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
console.log(userStore.personalDetailInfo, 'userStore.personalDetailInfo')
const total = ref(0);
const tableData = ref([]);
const handleChangeTab = (r, index) => {
  current.value = index;
};

const formatTime = (time) => {
  return dayjs(time * 1000).format('YYYY-MM-DD')
}

const fetchData = async() => {
  const params = {
    page: currentPage.value,
    rows: pageSize.value
  }
  const res = await myIntegralCenter(params)
  tableData.value = res.data.result;
  total.value = res.data.totalCount;
}

const handlePageChange = (page) => {
  currentPage.value = page;
  fetchData()
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1; // 改变页面大小时重置到第一页
};

onMounted(() => {
  fetchData()
})
</script>
<style lang="scss" scoped>
.my-points {
  .table-header {
    color: #333;
    font-size: var(--default12px);
  }
  .toGet {
    color: var(--main-color);
    text-decoration: underline;
    font-size: var(--default12px);
  }
  .toUse {
    color: var(--main-color);
    text-decoration: underline;
    font-size: var(--default12px);
  }
  .disabled {
    color: #999;
    font-size: var(--default12px);
  }
}

.center-header {
  height: 65px;
  border-bottom: 1px solid #cccccc;
  padding: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  .default {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #333;
    margin-right: 20px;
    &.active {
      color: #126983;
      position: relative;
      font-weight: 600;
      &::before {
        content: "";
        display: block;
        position: absolute;
        width: 60%;
        height: 2px;
        background-color: #126983;
        bottom: -5px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
.points-number {
  height: 74px;
  margin: 0 20px;
  background: linear-gradient(231.33deg, #AB6347 14.42%, #4C2211 85.58%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  p {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-left: 10px;
  }

  .avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
.points-info-desc {
  padding: 0px 20px;
  .desc-title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 5px;
  }
  .desc-content {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
}
.pagination {
  margin-top: 20px;
  margin-bottom: 20px;
}
.table-container {
  margin-top: 20px;
  padding: 0px 20px;
}
</style>
